<template>
  <view class="page">
    <uni-nav-bar
      title="我的雪王币"
      left-icon="left"
      showMenuButtonWidth
      statusBar
      backgroundColor="transparent"
      :border="false"
      color="#fff"
      @clickLeft="$tools.back"
    />
    <!-- 我的雪王币 header -->
    <view class="header">
      <view class="header-content">
        <view class="header-content-num">15</view>
        <view class="header-content-links">
          <view
            class="header-content-link"
            @tap="goToCoinsDetail"
          >
            <text>雪王币明细</text>
            <uni-icons
              type="right"
              size="12"
              color="#fff"
            />
          </view>
          <view
            class="header-content-link"
            @tap="goToCoinsRules"
          >
            <text>雪王币规则</text>
            <uni-icons
              type="right"
              size="12"
              color="#fff"
            />
          </view>
        </view>
      </view>
      <view class="header-img"></view>
    </view>
    <view class="body">
      <!-- 热门兑换 header -->
      <view class="body-header">
        <image
          src="/pages/customer-center/static/my-coins/ad_title.png"
          class="body-header-title"
        />
        <view
          class="d-flex items-center"
          @tap="goMosuShop"
        >
          <text class="text-primary text-base">查看更多</text>
          <uni-icons
            type="right"
            size="12"
            color="#E60012"
          />
        </view>
      </view>
      <!-- 热门兑换 cards -->
      <view class="ad-cards">
        <view
          class="ad-card"
          v-for="(item, index) in adPlaceList"
          :key="index"
        >
          <image
            :src="item.adImg"
            class="ad-card-img"
          />
        </view>
      </view>
      <!-- 日常任务 -->
      <view class="tasks">
        <view class="tasks-title">日常任务</view>
        <view class="tasks-list">
          <view class="tasks-item daysign">
            <image
              src="/pages/customer-center/static/my-coins/task_daysign.png"
              class="tasks-item-icon"
            />
            <view class="tasks-item-content">
              <text class="text-lg mb-base">每日签到</text>
              <view class="d-flex items-center">
                <image
                  src="/pages/customer-center/static/my-coins/task_coin.png"
                  class="tasks-item-content-coinicon"
                />
                <text class="tasks-item-content-desc"> +5雪王币 </text>
              </view>
            </view>
            <view class="tasks-item-button text-primary"> 签到 </view>
          </view>
          <view class="tasks-item finish-order">
            <image
              src="/pages/customer-center/static/my-coins/task_finish_order.png"
              class="tasks-item-icon"
            />
            <view class="tasks-item-content">
              <text class="text-lg mb-base">完成订单</text>
              <view class="d-flex items-center">
                <image
                  src="/pages/customer-center/static/my-coins/task_coin.png"
                  class="tasks-item-content-coinicon"
                />
                <text class="tasks-item-content-desc">
                  +10雪王币（每实付1元）
                </text>
              </view>
            </view>
            <view class="tasks-item-button text-warning"> 去下单 </view>
          </view>
        </view>
      </view>
      <!-- 新手任务 -->
      <view class="tasks">
        <view class="tasks-title">日常任务</view>
        <view class="tasks-list">
          <view class="tasks-item first-order">
            <image
              src="/pages/customer-center/static/my-coins/task_first_order.png"
              class="tasks-item-icon"
            />
            <view class="tasks-item-content">
              <text class="text-lg mb-base">完成首单</text>
              <view class="d-flex items-center">
                <image
                  src="/pages/customer-center/static/my-coins/task_coin.png"
                  class="tasks-item-content-coinicon"
                />
                <text class="tasks-item-content-desc">
                  +20雪王币（每实付1元）
                </text>
              </view>
            </view>
            <view class="tasks-item-button text-info"> 去下单 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "coins",
  data() {
    return {
      adPlaceList: [
        {
          adImg: "/pages/customer-center/static/my-coins/ad_1.jpg"
        },
        {
          adImg: "/pages/customer-center/static/my-coins/ad_2.jpg"
        }
      ]
    }
  },
  methods: {
    goToCoinsDetail() {
      uni.navigateTo({
        url: `/pages/customer-center/coins-detail/coins-detail`
      })
    },
    goToCoinsRules() {
      // uni.navigateTo({
      //   url: `/pages/customer-center/coins-rules/coins-rules`
      // })
    },
    goMosuShop() {
      uni.navigateTo({
        url: `/pages/activity/mosushop/mosushop`
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .uni-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
}
.page {
  width: 100%;
  height: 100%;
  position: relative;
}

.header {
  width: 100%;
  height: 450rpx;
  background-color: $uni-primary;
  position: relative;

  &-content {
    position: absolute;
    left: $uni-spacing-row-xxl;
    bottom: 140rpx;
    display: flex;
    flex-direction: column;
    color: #fff;

    &-num {
      font-size: 52rpx;
      color: #fff;
      font-weight: bold;
      margin-bottom: $uni-spacing-row-base;
    }

    &-links {
      display: flex;
      align-items: center;
    }

    &-link {
      display: flex;
      align-items: center;
      font-size: $uni-font-size-sm;
    }
  }

  &-img {
    position: absolute;
    right: 0;
    bottom: 80rpx;
    width: 375rpx;
    height: 272rpx;
    background-image: url("/pages/customer-center/static/my-coins/top_img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
  }
}

.body {
  width: 100%;
  background: #f7f7f7;
  border-radius: $uni-border-radius-xl;
  margin-top: -80rpx;
  z-index: 20;
  padding: $uni-spacing-row-base;
  position: relative;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $uni-spacing-row-base;

    &-title {
      width: 160rpx;
      height: 48rpx;
    }
  }
}

.ad-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $uni-spacing-row-base;
  margin-bottom: $uni-spacing-row-base;
}

.ad-card {
  background-color: #fff;
  border-radius: $uni-border-radius-base;
  &-img {
    width: 345rpx;
    height: 302rpx;
    border-radius: $uni-border-radius-base;
  }
}

.tasks {
  display: flex;
  flex-direction: column;

  &-title {
    font-size: $uni-font-size-xl;
    color: $uni-text-color;
    padding: $uni-spacing-row-xxl 0;
  }

  &-list {
    display: flex;
    flex-direction: column;
    gap: $uni-spacing-row-base;
  }

  &-item {
    display: flex;
    align-items: center;
    border-radius: 14px;

    &.daysign {
      background-color: #ffebed;
    }

    &.finish-order {
      background-color: #fff5de;
    }

    &.first-order {
      background-color: #e7e6fa;
    }

    &-icon {
      width: 150rpx;
      height: 200rpx;
    }

    &-content {
      display: flex;
      flex-direction: column;
      flex: 1;

      &-desc {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;
      }

      &-coinicon {
        width: 36rpx;
        height: 36rpx;
      }
    }

    &-button {
      margin-right: $uni-spacing-row-base;
      background-color: #fff;
      border-radius: $uni-border-radius-base;
      width: 140rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $uni-font-size-base;
    }
  }
}
</style>
